<template>
   <div class="cantainer">
      <div class="btn">
            <el-button type="warning">收费</el-button>
      </div>
      <div class="list">
          <div class="list-one">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
                    <el-form-item prop="name" style="width:18%" >
                      <span>挂号单号</span>
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item  prop="keshi" style="width:20%">
                      <span>科室</span>
                      <el-select v-model="ruleForm.keshi" placeholder="请选择您需要的科室">
                        <el-option label="妇产科" value="shanghai"></el-option>
                        <el-option label="儿科" value="beijing"></el-option>
                        <el-option label="内科" value="beijing"></el-option>
                        <el-option label="外科" value="beijing"></el-option>
                        <el-option label="口腔科" value="beijing"></el-option>
                        <el-option label="神经内科" value="beijing"></el-option>
                        <el-option label="皮肤科" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item  prop="type" style="width:20%">
                        <span>接诊类型</span>
                      <el-select v-model="ruleForm.type" placeholder="请选择接诊类型">
                        <el-option label="方案A" value="shanghai"></el-option>
                        <el-option label="方案B" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item  prop="docoter" style="width:20%">
                        <span>接诊医生</span>
                      <el-select v-model="ruleForm.docoter" placeholder="请选择接诊医生">
                        <el-option label="张三" value="shanghai"></el-option>
                        <el-option label="李四" value="beijing"></el-option>
                        <el-option label="王五" value="beijing"></el-option>
                        <el-option label="坤坤" value="beijing"></el-option>
                        <el-option label="小黑子" value="beijing"></el-option>

                      </el-select>
                    </el-form-item>
              </el-form>
              
             
          </div>
          <div class="list-two">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
                    <el-form-item prop="money" style="width:18%" >
                      <span>挂号费用</span>
                      <el-select v-model="ruleForm.money" placeholder="请选择挂号费用">
                        <el-option label="5元" value="shanghai"></el-option>
                        <el-option label="10元" value="beijing"></el-option>
                        <el-option label="15元" value="beijing"></el-option>
                        <el-option label="20元" value="beijing"></el-option>

                      </el-select>
                    </el-form-item>
                    <el-form-item  prop="zhenduan" style="width:20%">
                      <span>诊疗费</span>
                      <el-select v-model="ruleForm.zhenduan" placeholder="请选择诊疗费">
                        <el-option label="100元" value="shanghai"></el-option>
                        <el-option label="200元" value="beijing"></el-option>
                        <el-option label="300元" value="beijing"></el-option>
                        <el-option label="400元" value="beijing"></el-option>
                        <el-option label="500元" value="beijing"></el-option>

                      </el-select>
                    </el-form-item>
                    <el-form-item  prop="date" style="width:20%">
                      <div class="block">
                          <span class="demonstration">挂号日期</span>
                          <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                          </el-date-picker>
                      </div>
                    </el-form-item>
                    <el-form-item  prop="person" style="width:18%" label-width="-5px"  >
                         <span>挂号员</span>
                      <el-input v-model="ruleForm.person"></el-input>
                    </el-form-item>
              </el-form>
          </div>
      </div>
   </div>
</template>

<script>
export default {
    data() {
      return {
        ruleForm: {
          name: '',
          keshi: '',
          type: '',
          docoter: '',
          money: '',
          zhenduan: '',
          // date: '',
          person:''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          keshi: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          docoter: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          money: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          zhenduan: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          // date: [
          //   { required: true, message: '请选择活动资源', trigger: 'change' }
          // ],
          person: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      
    
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="less" scoped >
   .cantainer{
    width: 95%;
    height: 250px;
    margin-left: 30px;
    .btn{
      width: 100%;
      height: 60px;
      overflow: hidden;
      .el-button{
        float: right;
        margin-top: 10px;
      }
    }
      .list{
        width: 100%;
        height: 190px;
        background-color: #e6e7fb;
        border-radius: 10px;
        .list-one{
          width: 100%;
          height: 50%;
          .demo-ruleForm{
            display: flex;
            justify-content: space-around
          }
        }
        .list-two{
          width: 100%;
          height: 50%;
        .el-form-item{
          margin-right: 10px;
        }
          .demo-ruleForm{
            display: flex;
            justify-content: space-around
          }
        }
      }
   }  
</style>